/**
* Created by ren on 2017/1/10.
*/
<template>
  <div class='xcList jSJDetail'>
    <template v-if="showServerAgreement">
      <UserServerAgreement :_parentThis="this"></UserServerAgreement>
    </template>
    <template v-else>
      <div class="container con-wrap">
        <div
          style="font-size: 18px;color: #fd8f23;margin-top: 12px;padding-left: 20px;border-bottom: 2px solid #e9e9e9;padding-bottom: 22px">
          {{jinshengjinData.kinsonName}}
        </div>
        <div class="dt-msg">
          <ul>
            <li>
              <div>年化收益率</div>
              <div class="weight">{{this.yield}}%</div>
            </li>
            <div class="line"><img src="../../assets/line.png" alt=""></div>
            <li>
              <div>期限</div>
              <div class="weight">
                {{jinshengjinData.validity}}
                <span v-if="jinshengjinData.unit==='day'">天</span>
                <span v-if="jinshengjinData.unit==='month'">月</span>
                <span v-if="jinshengjinData.unit==='year'">年</span>
                <span v-if="jinshengjinData.unit==='week'">周</span>
              </div>
            </li>
            <div class="line"><img src="../../assets/line.png" alt=""></div>
            <li>
              <div>起购克数</div>
              <div class="weight">{{parseFloat(jinshengjinData.weightMin/1000).toFixed(1)}}g起购</div>
            </li>
          </ul>
          <div style="float: left;width: 100%;margin-left: 21px;margin-top: 26px;">
            <img src="../../assets/risk.png"
                 style="margin-right: 12px;width: 20px;margin-top: -3px;"><span>风险程度</span><span
            style="margin-left: 12px;color: #08e703">{{jinshengjinData.riskDegree}}</span> <span
            style="margin-left: 76px;margin-right: 14px">到期回款</span><span style="color: #fd8f23">自动转入平台零钱包</span>
          </div>
        </div>
        <div class="line"><img src="../../assets/line2.png" width="1"
                               height="240"></div>
        <div class="dt-form">
          <div class="server">
            <img :src="serverIsTrue?require('../../assets/true.png'):require('../../assets/false.png')"
                 @click="agreed"
                 style="margin-right: 20px;margin-top: -4px;cursor: pointer"><span>同意</span><span
            class="server-text" @click="showServer">《服务协议》</span>
          </div>
          <button class="btn" :disabled="!serverIsTrue" @click="toOrderConfirm">续存</button>
        </div>
      </div>
      <div class='product'>
        <div class="title"><i></i><span>金生金产品</span><i></i></div>
        <div v-html="jinshengjinData.introduce" style="padding: 20px"></div>
      </div>
    </template>
    <div class="overlayer" @touchmove.stop :class="{'show':showServerAgreement}">
    </div>
    <div class="overlayer" @touchmove.stop :class="{'show':showServerAgreement1}">
    </div>
    <div :class="{ball:true,disabled:!showServerAgreement1}"
         style="width: 617px;height: 288px;background: white;z-index: 100;position: fixed;top: 0;margin-top: 15%">
      <div style="text-align: center;font-size: 28px;color:#333333;margin-top: 90px">续存成功！</div>
      <div style="text-align: center;margin-top: 20px;font-size: 18px;color: #C1BBBB;">{{countDown}}s后跳转……</div>
    </div>
    <Notify :parentThis='this'></Notify>
  </div>
</template>

<script>
  import Datepicker from 'vuejs-datepicker'
  import UserServerAgreement from '../UserServerAgreement'

  import API from '../../api'
  import Notify from '../Notify'
  export default {
    name: 'xcList',
    components: {
      Datepicker,
      UserServerAgreement,
      Notify
    },
    data: function () {
      return {
        date: new Date(2016, 9, 16),
        showServerAgreement: false,
        showServerAgreement1: false,
        serverIsTrue: false,
        notifyStatus: 2,
        jinshengjinData: '',
        weight: '',
        GoldPrice: 0,
        yield: 0,
        countDown: 3
      }
    },
    props: ['_parentThis'],
    methods: {
      agreed: function () {
        this.serverIsTrue = !this.serverIsTrue
      },
      showServer: function () {
        this.showServerAgreement = !this.showServerAgreement
      },
      findKinsonGoldList: function () {
        this.$http.post(API.findKinsonGoldList, {
          id: this.$route.params.jsjId
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this.jinshengjinData = result.object.content[0]
            this.weight = (result.object.content[0].weightArry[0] / 1000).toFixed(1)
            this.yield = (result.object.content[0].yield * 100).toFixed(2)
            this.findGoldPrice(this.weight)
          } else {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      },
      findGoldPrice: function (weight) {
        weight = parseInt(weight)
        this.$http.post(API.findGoldPrice).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this.GoldPrice = (weight * result.object / 100 * (this.yield / 100 - 0.02)).toFixed(2)
          } else {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      },
      toOrderConfirm: function () {
        var obj = JSON.parse(this.$cookie.get('more_jsj_xc_obj'))
        this.$http.post(API.KinsonRenew, {
          kinsonId: this.$route.params.jsjId,
          weight: this.weight * 1000,
          type: 0,
          orderNo: obj.orderNo,
          buyId: obj.id,
          userId: this.$cookie.get('id')
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this.showServerAgreement1 = true
            var set = setInterval(() => {
              if (this.countDown === 0) {
                clearInterval(set)
                this.$router.go(-1)
              }
              this.countDown--
            }, 1000)
          } else {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      }
    },
    watch: {
      weight: function (newVal) {
        this.findGoldPrice(newVal)
      }
    },
    mounted: function () {
      this._parentThis.titHtml = '<span>购买记录 > <span>金生金</span> > <span>金生金详情</span> > <span style="color: #f48315;">续存</span></span>'
      this.findKinsonGoldList()
    }
  }
</script>

<style lang="scss">
  @import "../../scss/jSJDetail.scss";
</style>
